<template>
	<div>
		<div class="component-interaction-manager">
			<el-collapse v-model="state.activeCollapses">
				<el-collapse-item ref="callbackRef" name="1">
					<template #title>
						<div class="cif-array-title">
							回调参数
							<el-icon @click.stop="handleCallbackAddClick">
								<Edit />
							</el-icon>
							<el-icon @click.stop="handleCallbackDelClick"><Delete /></el-icon>
						</div>
					</template>
					<el-tabs v-model="state.activeCallbackTab">
						<el-tab-pane
							v-for="(callbackArg, index) in state.callbackArgs"
							:key="index"
							:label="`回调${index + 1}`"
							:name="`${index + 1}`">
							<CallbackArg :instance="props.instance" :callbackArg="callbackArg"></CallbackArg>
						</el-tab-pane>
					</el-tabs>
				</el-collapse-item>
				<el-collapse-item ref="eventRef" name="2">
					<template #title>
						<div class="cif-array-title">
							自定义事件
							<el-icon @click.stop="handleEventAddClick">
								<Edit />
							</el-icon>
							<el-icon @click.stop="handleEventDelClick"><Delete /></el-icon>
						</div>
					</template>
					<el-tabs v-model="state.activeEventTab">
						<el-tab-pane
							v-for="(interaction, index) in state.interactions"
							:key="index"
							:label="`事件${index + 1}`"
							:name="`${index + 1}`">
							<Interaction :instance="props.instance" :interaction="interaction"></Interaction>
						</el-tab-pane>
					</el-tabs>
				</el-collapse-item>
			</el-collapse>
		</div>
		<div class="down-btn-area">
			<el-button size="small" type="primary" style="margin: 10px" @click="pushConfigData">
				保存交互事件
			</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, toRefs, ref, watch } from 'vue';
import _ from 'lodash';
import CallbackArg from './Component/CallbackArg.vue';
import Interaction from './Component/Interaction.vue';
// import { usePrimaryStore } from '@/store';

// const store = usePrimaryStore();
const props = defineProps({
	instance: {
		type: Object,
		default() {
			return {};
		}
	}, // cpntTreeNode
	id: String,
	setConfiguredDataToInstance: {
		type: Function,
		default() {
			return () => {};
		}
	}
});

const state = reactive({
	activeCollapses: ['1', '2'],
	interactions: props.instance.interactions,
	callbackArgs: props.instance.callbackArgs,
	activeEventTab: '1',
	activeCallbackTab: '1'
	// unwatch: null
});

watch(
	() => props.instance.value && props.instance.value.uuid,
	(newVal, oldVal) => {
		if (newVal !== oldVal) {
			state.interactions = props.instance.value.interactions;
			state.callbackArgs = props.instance.value.callbackArgs;
			state.activeEventTab = '1';
			state.activeCallbackTab = '1';
		}
	}
);

const callbackRef = ref();
const eventRef = ref();
function handleCollapse(type: string) {
	if (type === 'callback') {
		console.log('handleCollapse', callbackRef.value);
		if (!callbackRef.value.isActive) {
			callbackRef.value.handleHeaderClick();
		}
	} else if (type === 'event') {
		console.log('handleCollapse', eventRef.value);
		if (!eventRef.value.isActive) {
			eventRef.value.handleHeaderClick();
		}
	}
}
// callback
function handleCallbackAddClick() {
	state.callbackArgs.push({});
	state.activeCallbackTab = state.callbackArgs.length.toString();
	handleCollapse('callback');
}

function handleCallbackDelClick() {
	state.callbackArgs.pop();
	state.activeCallbackTab = state.callbackArgs.length.toString();
}
// event
function handleEventAddClick() {
	state.interactions.push({});
	state.activeEventTab = state.interactions.length.toString();
	handleCollapse('event');
}
function handleEventDelClick() {
	state.interactions.pop();
	state.activeEventTab = state.interactions.length.toString();
}

// 保存
function pushConfigData() {
	// 整合数据
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log(
			'CIF.CC.ComponentsInteractionManager:pushConfigData 整合数据, ',
			state.interactions,
			state.callbackArgs
		);
	}

	props.setConfiguredDataToInstance(props.id, {
		interactions: state.interactions,
		callbackArgs: state.callbackArgs
	});
}

onMounted(() => {});
defineExpose({ ...toRefs(state) });
</script>

<style lang="scss">
.typeSelect {
	background-color: var(--dropdown-background) !important;
}
</style>
<style lang="scss" scoped>
.component-interaction-manager {
	position: relative;
	height: calc(100% - 72px);
	padding: 15px 15px 0 15px;
	/* .el-collapse-item__wrap {
    overflow: unset;
  } */

	/* .el-tabs__content {
    overflow: unset;
  } */
	:deep(.el-collapse) {
		.el-collapse-item__header {
			color: var(--white);
			background-color: transparent !important;
		}
		.el-collapse-item__wrap {
			color: var(--white);
			background-color: transparent !important;
		}
		.el-tabs__item {
			color: rgb(140, 145, 146);
		}
	}
	.cif-array-title {
		position: relative;

		i:hover {
			background-color: rgba(90, 93, 94, 0.61);
		}

		i:nth-child(1) {
			position: absolute;
			top: 16px;
			left: 256px;
			font-size: 16px;
			cursor: pointer;
			border-color: green;
			color: green;
		}
		i:nth-child(2) {
			position: absolute;
			top: 16px;
			left: 283px;
			font-size: 16px;
			cursor: pointer;
			border-color: red;
			color: red;
		}
	}
}
.down-btn-area {
	position: relative;
	width: 100%;
	bottom: 0;
	background-color: transparent;
	border-top: 1px solid var(--primary-high);
	:deep(.el-button) {
		background-color: var(--primary);
	}
}
</style>
